const path = require('path');
const HtmlWebackPlugin = require('html-webpack-plugin');

//获取绝对路径
const resolve= dir => path.resolve(__dirname,dir);
module.exports = {
    //开发环境
    // mode:'development',

    //entry:入口目录
  entry:{
      index:'./src/pages/index',
      destination:'./src/pages/destination'
  },

   //webpack的输出路径
   output:{
    //输出的目录
    path:resolve('dist'),
    //输出的文件名
    filename:'js/[name].js'
},
//source-map，调试用的，出错的时候，将定位到源码
devtool:'cheap-module-eval-source-map',
resolve:{
    //自动补全的扩展名
    extensions:['.js'],
    //路径别名
    alias:{
        api:resolve('src/api'),
        fonts:resolve('src/assets/fonts'),
        images:resolve('src/assets/images'),
        styles:resolve('src/assets/styles'),
        components:resolve('src/components'),
        pages:resolve('src/pages'),
    }
},
//不同类型模块的处理规则
module:{
    rules:[
        //css
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        //模板文件
        {
            test:/\.art$/,
            loader:'art-template-loader'
        },
        //图片
        {
          test: /\.jpg|png|gif|bmp|jpeg$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit:10240,
                name:"[name].[ext]",
                esModule: false
              }
            }
          ]},          
        //字体文件
        {
            test:/\.(woff2?|eot|ttf|otf)$/,
            loader:'url-loader',
            options:{
                limit:10000,
                name:'fonts/[name].[ext]'
            }
        }
    ]
},
  plugins:[
      //自将依赖注入html模板，并输出最终的html文件到目标文件夹
    new HtmlWebackPlugin({
        filename:'index.html',
      template:'./src/pages/index/index.art',
      //chunks区分多个页面的
      //入口目录指定的html页面
      chunks:['index']
    }),
    new HtmlWebackPlugin({
        filename:'destination.html',
      template:'./src/pages/destination/destination.art',
      chunks:['destination']
    }),
  ]
}